import React from 'react';
import {Table, Card, DatePicker,Popconfirm,Form,Input,Button} from 'antd';
import moment from 'moment';
import TaskService from '../../service/TaskService';
const { RangePicker} = DatePicker;
export default class ProcessList extends React.Component {

    state = {
        title:'任务领取待审批列表',
        search:'status==REQUEST;',
        searchParam : {},
        pagination: {pageSize: 10, current: 1,size:'middle'},
        pagStart: {pageSize: 10, current: 1,size:'middle'},
        tableList:[],
        loading:false,
        taskId:null
    };

    constructor(props) {
        super(props);
    }

    componentDidMount() {
        this.fetch(this.state.pagination);
    }

    //查询方法
    fetch(pagination) {
        this.setState({
            loading: true,
        });
        let pager = {
            query: this.state.search,
            page: pagination.current - 1,
            size: pagination.pageSize,
            current: pagination.current,
            //sort:['receiptDate', 'DESC']
        };
        TaskService.getProcessByTaskId(pager).done((data)=>{
            console.log('data',data.entity);
            if (data.entity) {
                this.setState({
                    tableList: data.entity,
                    loading: false,
                    pagination: {
                        total: parseInt(data.headers['X-Total-Count']),
                        pageSize: this.state.pagination.pageSize,
                        current: pager.current
                    }
                })
            }
        });
    }
    //查询方法
    searchClick() {
        let search = 'status==REQUEST;';
        let params = this.state.searchParam;
        // if (params.startTime) {
        //     search += 'createTime=gte='+params.startTime+';';
        //     search += 'createTime=lte='+params.endTime+';';
        // }
        if (params.firstName) {
            search += 'student.firstName=like='+params.firstName+';';
        }

        if (params.lastName) {
            search += 'student.lastName=like='+params.lastName+';';
        }
        if (params.title) {
            search += 'task.title=like=' + params.title+';';
        }
        this.state.search = search;
        this.fetch(this.state.pagStart);
    }

    render() {
        return (
            <Card title={this.state.title} className="user">
                <Form layout="inline" style={{marginBottom:'20px'}}>
                    <Form.Item label={'姓名：'}>
                        <Input placeholder="firstName"
                               value={this.state.searchParam.firstName}
                               style={{width:'150px'}}
                               onChange={(e)=>{
                                   this.state.searchParam.firstName = e.target.value;
                                   this.forceUpdate();
                               }}
                        />
                        <Input placeholder="lastName"
                               value={this.state.searchParam.lastName}
                               style={{width:'150px',marginLeft:'5px'}}
                               onChange={(e)=>{
                                   this.state.searchParam.lastName = e.target.value;
                                   this.forceUpdate();
                               }}
                        />
                    </Form.Item>
                    <Form.Item label={'任务标题：'}>
                        <Input placeholder="任务标题"
                               onChange={(e)=>{
                                   console.log(e.target.value);
                                   this.state.searchParam.title = e.target.value
                               }}
                        />
                    </Form.Item>
                    {/*<Form.Item label={'时间：'}>*/}
                    {/*<RangePicker*/}
                    {/*placeholder={['开始时间', '结束时间']}*/}
                    {/*onChange={(e)=>{*/}
                    {/*this.state.searchParam.startTime =  e[0].startOf('day').valueOf();*/}
                    {/*this.state.searchParam.endTime = e[1].endOf('day').valueOf();*/}
                    {/*}}/>*/}
                    {/*</Form.Item>*/}
                    <Form.Item>
                        <Button
                            type="primary"
                            icon="search"
                            onClick={()=>{
                                this.searchClick();
                            }}
                        >搜索</Button>
                    </Form.Item>
                </Form>
                <Table
                    rowKey={record => record.id}
                    bordered={true}
                    loading={this.state.loading}
                    dataSource={this.state.tableList}
                    pagination={this.state.pagination}
                    onChange={this.fetch.bind(this)}
                    columns={[
                        {title:"姓名", align:'center', dataIndex: 'name', key: 'creator',width:200,render : (text, record) => {
                            return (
                                <a onClick={()=>{
                                    this.props.history.push("/student/view/" + record.student.id);
                                }}>{record.student?((record.student.firstName||'')+' '+(record.student.lastName||'')):''}</a>
                            )
                        }},
                        {title:"任务标题", align:'center', dataIndex: 'taskName', key: 'taskName',width:200,render : (text, record) => {
                            return (
                                <a onClick={()=>{
                                    this.props.history.push("/task/view/" + record.task.id);
                                }}>{record.task?record.task.title:''}</a>
                            )
                        }},
                        {title:"用户昵称", align:'center', dataIndex: 'nickName', key: 'nickName',width:150,render:(text,record)=>{
                            return(
                                <span>{record.student.nickName}</span>
                            )
                        }},
                        {title:"领取时间", align:'center', dataIndex: 'createTime', key: 'createTime',width:150,render : (text, record) => {
                            return (
                                <span>{record.createTime?moment(record.createTime).format('YYYY-MM-DD'):''}</span>
                            )
                        }},
                        {title:"任务领取状态", align:'center', dataIndex: 'status', key: 'status',width:150,render : (text, record) => {
                            if(record.status==='REQUEST'){
                                return (
                                    <span>已申请</span>
                                )
                            }else if(record.status==='PROCESSING'){
                                return (
                                    <span>进行中</span>
                                )
                            }else if(record.status==='DONE'){
                                return (
                                    <span>已完成</span>
                                )
                            }
                        }},
                        {title:"操作", align:'center', dataIndex: 'operation', key: 'operation',
                            render : (text, record) => {
                                console.log('record',record);
                                return (
                                    <div className='btn-cen-div'>
                                        {record.status==='REQUEST'&&
                                        <div>
                                            <Popconfirm placement="top" okText="确认" cancelText="关闭" title="是否通过申请?" onConfirm={() =>{
                                                let putData = record;
                                                let studentId = record.student.id;
                                                let taskId = record.task.id;
                                                putData.status = 'PROCESSING';
                                                putData.student = {id:studentId};
                                                putData.task = {id:taskId};
                                                console.log('putData',putData);
                                                TaskService.updateProcess(putData).done(()=>{
                                                    this.fetch(this.state.pagination);
                                                })
                                            }}>
                                                <a>通过申请</a>
                                            </Popconfirm>
                                            <Popconfirm placement="top" okText="确认" cancelText="关闭" title="是否删除申请?" onConfirm={() =>{
                                                TaskService.deleteProcess(record.id).done(()=>{
                                                    this.fetch(this.state.pagination);
                                                })
                                            }}>
                                                <a style={{color:'red'}}>拒绝申请</a>
                                            </Popconfirm></div>}
                                        {record.status==='PROCESSING'&&
                                        <Popconfirm placement="top" okText="确认" cancelText="关闭" title="是否确认任务已完成?" onConfirm={() =>{
                                            let putData = record;
                                            let studentId = record.student.id;
                                            let taskId = record.task.id;
                                            putData.status = 'DONE';
                                            putData.student = {id:studentId};
                                            putData.task = {id:taskId};
                                            console.log('putData',putData);
                                            TaskService.updateProcess(putData).done(()=>{
                                                this.fetch(this.state.pagination);
                                            })
                                        }}>
                                            <a>确认完成</a>
                                        </Popconfirm>}
                                        {record.status==='DONE'&&
                                        <a style={{color:'gray'}}>已完成</a>}
                                    </div>
                                )
                            }
                        },
                    ]}
                />
            </Card>
        )
    }
}